<template>
	<view class="row-monthly">
		<view class="m-head1">
			<u-navbar leftText="线上月卡" @rightClick="rightClick" :autoBack="true" placeholder :safeAreaInsetTop="true"
				:bgColor="bgColor">
			</u-navbar>
			<view class="group park-card">
				<image class="bg-image" mode="widthFix" :src="imageUrl + 'bgColor.png'"></image>
				<view class="park-content">
					<text class="park-name">{{ editItem.name }}</text><br>
					<text class="park-address" v-if="editItem.groupType != 1">{{ editItem.address || '暂无地址' }}</text>
					<text class="park-address2" v-if="editItem.groupType == 1" @click="groupDetail">查看包含车场></text>
				</view>
			</view>
		</view>
		<view class="wp">
			<view class="ul-monthly">
				<view class="li">
					<view class="con">
						<view class="tit">
							车牌号码
						</view>
						<view class="group">
							<view class="plate-item" @click="showPlateSelector">
								<text class="plate-text">{{ choseCarPlate || '请选择车牌' }}</text>
								<image class="arrow-icon" mode="widthFix" :src="imageUrl + 'list/arr4.svg'"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="li">
					<view class="con">
						<view class="tit">
							套餐选择
						</view>
						<view class="group package-list-container" :class="{'collapsed': isCollapsed}">
							<view class="package-card" v-for="(item, index) in packageOptions" :key="index"
								@click="selectPackage(item)" :style="{
							            border: choseCarPackage.packageId == item.packageId ? '2px solid #f0864f' : '1px solid #999'
							          }">
								<view class="card-left">
									<text class="card-title">{{ item.memo || '请选择套餐' }} </text>
									<!-- <text class="help-btn"
											@click.stop="showMemoModal(item)" v-if="item.memo3">?</text> -->

									<text class="card-desc">{{ item.memo2 }}</text>

								</view>
								<!-- 右侧价格 -->
								<view class="card-right">
									<text class="card-desc2" @click="showMemoModal(item)" v-if="item.memo3">查看详情></text><br>
									<text class="price">¥{{ item.memo1 }}</text>
								</view>
							</view>
						</view>
						<!-- <button v-if="packageOptions.length > 2" @click="toggleCollapse">{{ isCollapsed ? '展开' : '折叠' }}</button> -->
						<button v-if="packageOptions.length > 2" class="collapse-btn" @click="toggleCollapse">
							<text class="icon">{{ isCollapsed ? '🔽' : '🔼' }}</text>
							{{ isCollapsed ? '展开更多' : '收起' }}
						</button>
					</view>
				</view>
				<view class="li">
					<view class="con">
						<view class="tit">
							购买时长
						</view>
						<view class="group">
							<!-- 横向滚动容器 -->
							<scroll-view scroll-x="true" class="package-list-container" :show-scrollbar="false">
								<!-- 内部包裹所有套餐项 -->
								<view class="package-list-wrapper">
									<view v-for="(item, index) in packageList" :key="index" class="one-package" :style="{
							            border: chosePackage.id == item.id ? '2px solid #f0864f' : '1px solid #999'
							          }" @click="chosePackageFun(item)">
										<!-- 套餐名称 -->
										<view class="package-top">
											{{ item.unit+dealKewWords(item.keyword) }}
										</view>
										<!-- 套餐价格 -->
										<view class="package-money">
											<text style="font-size: 5vw">￥{{ dealMoney(item.scale) }}</text>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
				<view class="li" v-if="false">
					<view class="con">
						<view class="group">
							<view class="left">
								选择停车场
							</view>
							<navigator url="/pages/monthlycard/select" hover-class="none" class="a right">
								请选择停车场
								<image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
							</navigator>
						</view>
						<view class="group">
							<view class="left">
								包月类型
							</view>
							<navigator url="" hover-class="none" class="right">
								小型车
								<image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
							</navigator>
						</view>
					</view>
				</view>
				<view class="li">
					<view class="con">
						<view class="group">
							<view class="left">
								开始日期
							</view>
							<view class="right">
								<picker mode="date" :value="startDate" @change="onStartDateChange" :disabled="cantChoseTime"
									:start="start" :end="end">
									<view :class="['selectButton', cantChoseTime ? 'disabled' : '']">
										<text>{{ startDate }}</text>
										<text v-if="!cantChoseTime" class="arrow">▼</text>
									</view>
								</picker>
							</view>
						</view>
						<!-- 新增提示行 -->
						<view class="hint-text">
							可选套餐生效日期：{{ start }} 至 {{ end }}
						</view>

						<view class="group">
							<view class="left">
								结束日期
							</view>
							<view class="right disabled-text">{{ endDate }}</view>
						</view>
						<view class="group" v-if="false">
							<view class="left">
								有效时段
							</view>
							<navigator url="" hover-class="none" class="right a">
								8:00-17:00
								<image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
							</navigator>
						</view>
					</view>
				</view>
				<view class="li" v-if="false">
					<view class="con">
						<navigator url="" hover-class="none" class="group">
							<view class="left">
								行驶证
							</view>
							<view class="right">
								<image class="icon" mode="widthFix" :src="imageUrl +'list/arr4.svg'"></image>
							</view>
						</navigator>
					</view>
				</view>
			</view>
			<view class="m-orderdet4" v-if="false">
				<view class="tit">
					支付方式
				</view>
				<radio-group>
					<view class="radgroup">
						<label>
							<view class="left">
								<image class="icon" mode="widthFix" :src="imageUrl +'list/icon1.png'"></image>
								微信支付
							</view>
							<radio checked="false" value="1" />
						</label>
						<!-- <label>
              <view class="left">
                <image class="icon" mode="widthFix" :src="imageUrl +'list/icon2.png'"></image>
                钱包支付(￥100)
              </view>
              <radio checked="true" value="2" />
            </label> -->

					</view>
				</radio-group>
			</view>
			<view class="g-ht"></view>
			<!-- 同意协议区域 -->
			<!-- <view class="agreement-container">
				<view class="agreement-item">
					<radio 
						name="agree" 
						value="true" 
						@change="onAgreeChange"
						checked="false"
						:disabled="!canAgree"
					/>
					<text class="agreement-text">
						我已阅读并同意 <text class="link-text" @click="showRules">《场库包月规则》</text>
					</text>
				</view>
				<view class="hint-text small-hint">
					⚠️ 请仔细阅读服务条款，确认无误后再进行支付。
				</view>
			</view> -->
			<view class="g-dwbtn">
				<view class="left">总额
					<view class="p1">￥{{ dealMoney(chosePackage.scale) }}</view>
				</view>
				<view class="right">
					<view class="btn1 btn3" @click="createOrder">立即购买</view>
				</view>
			</view>


		</view>
		<!-- 自定义弹窗 -->
		<view v-if="isModalVisible" class="modal-mask" @click="isModalVisible = false">
			<view class="modal-box" @click.stop>
				<text class="title">说明</text>
				<view v-html="memo3Nodes"></view>
				<button class="modal-confirm-btn" @click="isModalVisible = false">我知道了</button>
			</view>
		</view>

		<!-- 底部弹窗：从下往上滑出 -->
		<view v-if="showPopup" class="popup-overlay" @click="closePopup">
			<view class="popup-container" @click.stop>
				<view class="popup-header">
					<text> {{editItem.name}} 包含车场 {{parkingList.length}} 个</text>
					<text @click="closePopup" class="close-btn">×</text>
				</view>
				<view class="popup-body">
					<view v-for="(park, index) in parkingList" :key="index" class="park-item">
						<view class="park-name">{{ park.name }}</view>
						<view class="park-address3">{{ park.address }}</view>
						<!-- <view class="park-distance">{{ park.distance }}公里</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get,
		post,
		commonSelect
	} from '../../api/myHttps';
	import dayjs from 'dayjs'
	export default {
		data() {
			return {
				isCollapsed: true, // 控制是否折叠
				// 头部背景色
				bgColor: 'transparent',
				editItem: {},
				plateOptions: [],
				selectedValue: '',
				choseCarPlate: '', // 选中的车牌
				chosePackage: {},
				packageList: [],
				cantChoseTime: false,
				startDate: '',
				endDate: '',
				totalPrice: 0,

				payModeKeyword: '',
				payId: '',
				parkCode: '',
				parkId: '',
				start: '',
				end: '',
				packageOptions: [],
				choseCarPackage: {},
				isModalVisible: false,
				memo3Nodes: [],
				showPopup: false,
				parkingList: []
			}
		},
		onLoad(options) {
			if (typeof options.item !== 'undefined') {
				this.editItem = JSON.parse(decodeURIComponent(options.item));
				console.log('编辑项：', this.editItem);
				this.parkCode = this.editItem.parkCode;
				this.parkId = this.editItem.parkId;

				let data = {
					"key": "renew_plate_date_zkh",
					"phone": uni.getStorageSync('phone'),
					"parameter": {
						"kind":this.kind,
						"plate": this.editItem.plate,
						"groupType": this.editItem.groupType,
						"parkId": this.editItem.parkId,
						"end": this.editItem.end

					}
				}
				commonSelect(data).then((res) => {
					this.startDate = res.records.start;
					this.plateOptions = [{
						"delay": res.records.delay,
						"plate": this.editItem.plate,
						"start": this.startDate
					}];
					this.choseCarPlate = this.plateOptions[0].plate;
					this.start = dayjs().subtract(this.plateOptions[0].delay, 'day').format('YYYY-MM-DD');
					this.end = dayjs().add(this.plateOptions[0].delay, 'day').format('YYYY-MM-DD');
				}).catch(error => {
					// 失败时执行
					console.error('出错了:', error);
					uni.showModal({
						title: '提示',
						content: error.errmsg,
						showCancel: false, // 不显示“取消”按钮
						confirmText: '我知道了',
						success: (res) => {
							if (res.confirm) {
								this.goBack();
							}
						}
					});
				})




			} else {
				let parkItem = JSON.parse(decodeURIComponent(options.parkItem));
				this.editItem = {
					...parkItem,
					parkId: parkItem.id,
				}
				this.parkCode = parkItem.parkCode;
				this.parkId = parkItem.id;

				this.startDate = dayjs().format('YYYY-MM-DD');
				this.getPlates();
			}

			console.log("初始化this.editItem：",this.editItem);
			this.getPackageOptions();
			setTimeout(() => {
				this.dealEndDate(this.startDate) // 初始化结束日期
			}, 500);

		},
		methods: {
			toggleCollapse() {
				this.isCollapsed = !this.isCollapsed;
			},
			selectPackage(item) {
				this.choseCarPackage = item;
				// 可选：高亮选中的套餐
				this.packageList = item.detail
				this.chosePackageFun(this.packageList[0])
			},
			getSelected() {
				const value = this.selectedValue;
				const label = this.cityOptions.find(item => item.value === value)?.label || '';

			},
			getPlates() {
				let data = {
					"key": "pending_plate_zkh",
					"phone": uni.getStorageSync('phone'),
					"parameter": {
						"ownerId": uni.getStorageSync('ownerId'),
						"parkId": this.editItem.parkId,
						"groupType": this.editItem.groupType
					}
				}
				commonSelect(data).then((res) => {

					this.plateOptions = res.records;
					this.choseCarPlate = this.plateOptions[0].plate;
					this.start = dayjs().subtract(this.plateOptions[0].delay, 'day').format('YYYY-MM-DD');
					this.end = dayjs().add(this.plateOptions[0].delay, 'day').format('YYYY-MM-DD');

				}).catch(error => {
					// 失败时执行
					console.error('出错了:', error);
					uni.showModal({
						title: '提示',
						content: error.errmsg,
						showCancel: false, // 不显示“取消”按钮
						confirmText: '我知道了',
						success: (res) => {
							if (res.confirm) {
								this.goBack();
							}
						}
					});
				})
			},
			getPackageOptions() {
				let data = {
					"key": "park_package_zkh",
					"phone": uni.getStorageSync('phone'),
					"current": 1,
					"size": 10,
					"parameter": {
						"kind": this.editItem.kind,
						"groupType": this.editItem.groupType,
						"parkId": this.editItem.parkId,
					}
				}
				commonSelect(data).then((res) => {
					this.packageOptions = res.records;
					if (this.packageOptions.length > 0) {
						this.selectPackage(this.packageOptions[0])
					} else {
						uni.showModal({
							title: '提示',
							content: "未查询到套餐，建议修改选项后重试。",
							showCancel: false, // 不显示“取消”按钮
							confirmText: '我知道了',
							success: (res) => {
								if (res.confirm) {
									this.goBack();
								}
							}
						});
					}

				}).catch(error => {
					// 失败时执行
					console.error('出错了:', error);
					uni.showModal({
						title: '提示',
						content: error.errmsg,
						showCancel: false, // 不显示“取消”按钮
						confirmText: '我知道了',
						success: (res) => {
							if (res.confirm) {
								this.goBack();
							}
						}
					});
				})
			},
			changePlate(e) {
				const index = e.detail.value // 获取选中的索引
				if (index === '') return
				const selectedPlate = this.plateOptions[index].plate
				this.choseCarPlate = selectedPlate
				// 这里可以执行其他逻辑
			},
			// 处理关键词
			dealKewWords(keyword) {
				return keyword == "month" ? "个月" : keyword == "year" ? "年" : "天";
			},

			// 格式化金额（保留两位小数）
			dealMoney(value) {
				return Number(value / 100).toFixed(2)
			},

			// 选择套餐
			chosePackageFun(item) {
				this.chosePackage = {
					...item
				}
				this.totalPrice = Number(item.scale / 100).toFixed(2)
				this.dealEndDate(this.startDate);
				// 可在此添加其他逻辑，如请求接口、更新页面等
			},
			// 处理开始日期选择
			onStartDateChange(e) {
				const selectedDate = e.detail.value // 格式：YYYY-MM-DD
				this.startDate = selectedDate
				this.dealEndDate(selectedDate)
			},

			// 计算结束日期
			dealEndDate(startDate) {
				const unit = this.chosePackage.unit
				const type = this.chosePackage.keyword

				let end = dayjs(startDate).add(unit, type)
				this.endDate = end.format('YYYY-MM-DD')
			},
			createOrder() {
				let params = {
					ownerId: uni.getStorageSync("ownerId"),
					packageId: this.choseCarPackage.packageId,
					parkId: this.editItem.parkId,
					payCharge: this.chosePackage.scale,
					scaleId: this.chosePackage.id,
					plate: this.choseCarPlate,
					startTime: this.startDate + " 00:00:00",
					endTime: this.endDate + " 23:59:59",
					type: this.editItem.groupType
				};
				post('/city-pay/ownerPay/period/createOrder', params).then((res) => {
					this.payModeKeyword = res.payModeList.find(x => x.indexOf('weixin') > -1);
					this.payId = res.payId;
					this.goPay();
				})
			},
			goPay() {
				let data = {
					method: "plate_renew",
					bizContent: {
						parkCode: this.editItem.parkCode,
						parkId: this.editItem.parkId,
						payId: this.payId,
						cityparkOwnerId: uni.getStorageSync("ownerId"),
						subAppId: uni.getAccountInfoSync().miniProgram.appId,
						subOpenId: uni.getStorageSync("openid"),
						payModeTradeType: "JSAPI",
						payModeKeyword: this.payModeKeyword,
						type: this.editItem.groupType
					}
				};
				post('/city-pay/eulb/prepare/pay', data).then((res) => {
					console.log(res);
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.extendParams.timeStamp,
						nonceStr: res.extendParams.nonceStr,
						package: res.extendParams.package,
						paySign: res.extendParams.paySign,
						signType: res.extendParams.signType,
						success: function(res) {
							uni.navigateTo({
								url: '/pages/order/paysucc'
							})
						},
						fail: function(err) {
							uni.showToast({
								title: err.errMsg,
								icon: 'none'
							})
						}
					});

				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			showPlateSelector() {
				uni.showActionSheet({
					itemList: this.plateOptions.map(item => item.plate),
					success: (res) => {
						const index = res.tapIndex;
						if (index !== -1) {
							this.choseCarPlate = this.plateOptions[index].plate;
						}
					},
					fail: () => {
						console.log('取消选择');
					}
				});
			},
			showHelp(item) {
				uni.showModal({
					title: '说明',
					content: item.memo3,
					confirmText: '我知道了',
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
						}
					}
				});
			},
			showMemoModal(item) {
				this.memo3Nodes = item.memo3
				this.isModalVisible = true;
			},
			groupDetail() {
				let data = {
					"key": "group_detail_zkh",
					"phone": uni.getStorageSync('phone'),
					"parameter": {
						"parkId": this.editItem.parkId,
					}
				}
				commonSelect(data).then((res) => {
					this.parkingList = res.records;								
				}).catch(error => {
					// 失败时执行
					console.error('出错了:', error);
					uni.showModal({
						title: '提示',
						content: error.errmsg,
						showCancel: false, // 不显示“取消”按钮
						confirmText: '我知道了',
						success: (res) => {
							if (res.confirm) {
								this.goBack();
							}
						}
					});
				})
				this.showPopup = true;
			},
			closePopup() {
				this.showPopup = false;
			}
		}
	}
</script>

<style>
	page {
		background-color: #F4FAF7;
	}

	.select-container {
		display: inline-block;
	}

	.uni-input {
		padding: 8px 12px;
		border: 1px solid #ddd;
		border-radius: 4px;
		font-size: 14px;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		color: #333;
	}


	/* 滚动容器 */
	.package-list-container {
		white-space: nowrap;
		/* 关键：禁止换行 */
		width: 100%;
		overflow-x: auto;
		/* 允许横向滚动 */
	}

	/* 包裹所有项的容器 */
	.package-list-wrapper {
		display: flex;
		gap: 10px;
		padding: 5px 0;
		min-width: max-content;
		/* 确保内容宽时能滚动 */
	}

	/* 单个套餐项 */
	.one-package {
		display: inline-block;
		/* 关键：保持横向排列 */
		width: 110px;
		padding: 15px 10px;
		border: 1px solid #999;
		border-radius: 8px;
		text-align: center;
		background-color: #fff;
		transition: border 0.3s ease;
		vertical-align: top;
		box-sizing: border-box;
	}

	/* 价格区域 */
	.package-top {
		font-size: 14px;
		color: #333;
		margin-bottom: 8px;
		white-space: normal;
		word-break: break-word;
		line-height: 1.4;
	}

	.package-money {
		font-size: 16px;
		color: #f00;
		font-weight: bold;
	}

	/* 可选：隐藏滚动条（部分平台有效） */
	::-webkit-scrollbar {
		display: none;
	}

	.plate-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 16px;
		background-color: #fff;
		border: 1px solid #ddd;
		border-radius: 8px;
		font-size: 14px;
		color: #333;
		width: 100%;
		box-sizing: border-box;
		cursor: pointer;
	}

	.car-icon {
		width: 18px;
		height: 18px;
		margin-right: 8px;
	}

	.plate-text {
		flex: 1;
		text-align: left;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.arrow-icon {
		width: 12px;
		height: 12px;
	}

	/* 停车场卡片容器 */
	.park-card {
		position: relative;
		width: 100%;
		height: 100px;
		/* 调整高度 */
		background-color: #f5f5f5;
		border-radius: 16px;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		margin-top: 20rpx;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	/* 背景图片（半透明） */
	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0.3;
		z-index: 0;
	}

	/* 内容区域 */
	.park-content {
		position: relative;
		z-index: 1;
		flex: 1;
		color: #333;
		font-size: 14px;
		line-height: 1.4;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.park-name {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 4rpx;
	}

	.park-address {
		font-size: 12px;
		color: #666;
	}
	
	.park-address2 {
		font-size: 12px;
		color: #007AFF;
	}

	/* 小汽车图标 */
	.car-icon {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		z-index: 1;
	}

	.m-head1 {
		position: relative;
	}

	.bg {
		width: 100%;
		height: auto;
		display: block;
		opacity: 0.3;
		/* 避免干扰文字 */
	}

	.disabled-text {
		color: #999;
		/* 或 #ccc、#aaa 等禁用灰色 */
	}

	/* 提示行样式 - 完全匹配图片 */
	.hint-text {
		font-size: 12px;
		/* 小字号 */
		color: #f0864f;
		/* 橙色文字，与你的主题色一致 */
		padding: 8rpx 0;
		margin: 12rpx 0;
		background-color: #f9f9f9;
		/* 白色背景 */
		border-radius: 4rpx;
		border-left: 4rpx solid #f0864f;
		/* 左侧橙色竖线 */
		padding-left: 16rpx;
		/* 内容不贴边 */
		display: flex;
		align-items: center;
		line-height: 1.4;
	}

	/* 使用 ::before 插入圆形图标 */
	.hint-text::before {
		content: "⚠️";
		/* 或者用 Unicode: \u26A0 */
		color: #f0864f;
		font-size: 14px;
		margin-right: 6rpx;
		vertical-align: middle;
	}

	/* 左侧内容 */
	.card-left {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-right: 20rpx;
	}

	.check-icon {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
		vertical-align: middle;
	}

	.card-desc {
		font-size: 20rpx;
		color: #666;
		line-height: 1.4;
	}

	.card-desc2 {
		font-size: 20rpx;
		color: #808080;
		line-height: 1.4;
	}

	/* 右侧价格 */
	.card-right {
		text-align: right;
	}

	.price {
		font-size: 18rpx;
		color: #f0864f;
		font-weight: bold;
	}

	.package-card {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 24rpx;
		background-color: #fff7d8;
		/* 浅黄背景 */
		border-radius: 12rpx;
		border: 1px solid #ffe0b2;
		margin-bottom: 16rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
		cursor: pointer;
		transition: all 0.3s ease;
		width: 90%;
	}

	.package-card.active {
		background-color: #fff5c2;
		border-color: #ffcc66;
		box-shadow: 0 4rpx 8rpx rgba(255, 180, 0, 0.1);
	}

	.group.package-list-container {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.group.collapsed {
		max-height: 150px;
		overflow: hidden;
		transition: max-height 0.3s ease-out;
	}

	.collapse-btn {
		width: auto;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 30rpx;
		background-color: #f5f7fa;
		/* 浅灰背景 */
		color: #409eff;
		/* 主题蓝色 */
		font-size: 28rpx;
		border: 1rpx solid #e4e7ed;
		border-radius: 30rpx;
		/* 圆角 */
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.collapse-btn::after {
		border: none;
		/* 去掉 button 默认边框（uni 特有） */
	}

	.icon {
		margin-right: 12rpx;
		font-size: 24rpx;
	}

	.card-title {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 4rpx;
		display: inline-flex;
		align-items: center;
		gap: 8rpx;
	}

	.help-btn {
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		font-size: 24rpx;
		color: #999;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 50%;
		margin-left: 10rpx;
		position: relative;
		top: -13rpx;
		vertical-align: middle;
	}

	/* 协议区域样式 */
	.agreement-container {
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 20rpx;
	}

	.agreement-item {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333;
		gap: 16rpx;
	}

	.agreement-item radio {
		transform: scale(0.8);
	}

	.agreement-text {
		flex: 1;
		line-height: 1.4;
	}

	.link-text {
		color: #f0864f;
		text-decoration: underline;
		font-weight: 500;
	}

	.small-hint {
		font-size: 24rpx;
		color: #999;
		padding: 10rpx 0;
		border-left: 4rpx solid #f0864f;
		background-color: #f9f9f9;
		border-radius: 4rpx;
		padding-left: 16rpx;
		margin-top: 10rpx;
	}

	.ul-monthly .li {
		margin-bottom: 0rpx;
	}

	.ul-monthly .group {
		padding: 10rpx 0;
	}

	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}

	.modal-box {
		background: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		width: 80%;
	}

	/* 弹窗标题 - 确保居中 */
	.title {
		text-align: center;
		/* 已有，但强调一下 */
		font-weight: bold;
		font-size: 32rpx;
		margin-bottom: 30rpx;
		display: block;
	}

	/* 弹窗中的“我知道了”按钮 —— 完全匹配“立即购买”按钮 */
	.modal-box .modal-confirm-btn {
		width: 100%;
		height: 80rpx;
		/* 调整为弹窗适配高度 */
		line-height: 80rpx;
		background: linear-gradient(98.86deg, #00BBFF 0%, #5AD47A 100%);
		/* 同样渐变 */
		color: #ffffff;
		font-size: 30rpx;
		font-weight: 600;
		border-radius: 40rpx;
		/* 略微缩小圆角以适配弹窗 */
		border: none;
		outline: none;
		box-shadow: 0 4rpx 12rpx rgba(0, 187, 255, 0.2);
		/* 柔和阴影，增强立体感 */
		transition: background 0.2s ease, transform 0.1s ease;
	}

	/* 去除 uni 默认边框 */
	.modal-box .modal-confirm-btn::after {
		border: none;
	}

	/* 按下时反馈：轻微变暗 + 微缩放 */
	.modal-box .modal-confirm-btn:active,
	.modal-box .modal-confirm-btn:hover {
		background: linear-gradient(98.86deg, #0099CC 0%, #4EBC6B 100%);
		/* 渐变加深一点 */
		transform: scale(0.99);
	}

	.modal-confirm-btn {
		margin-top: 30rpx;
	}

	.popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		display: flex;
		justify-content: center;
		/* 关键：允许子元素从底部对齐 */
		align-items: flex-end;
	}

	.popup-container {
		width: 100%;
		max-width: 100%;
		height: 75vh;
		/* 占据 3/4 屏幕高度 */
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.2);
		transform: translateY(0);
		transition: transform 0.3s ease-out;
	}

	/* 动画：从底部滑入 */
	.popup-container {
		animation: slideUp 0.3s ease-out forwards;
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		font-size: 32rpx;
		color: #333;
		border-bottom: 1rpx solid #eee;
	}

	.close-btn {
		font-size: 36rpx;
		color: #999;
	}

	.popup-body {
		padding: 30rpx;
		height: calc(75vh - 120rpx);
		/* 减去 header 高度 */
		overflow-y: auto;
	}

	.park-item {
		padding: 20rpx;
		background-color: #f9f9f9;
		border-radius: 10rpx;
		margin-bottom: 10rpx;
		position: relative;
	}

	.park-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.park-address3 {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.park-distance {
		font-size: 24rpx;
		color: #999;
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}
</style>